import React,{Component} from 'react'
import {Link,browserHistory} from 'react-router'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch'
import {getSelectessay,submitEssSh} from '../../config/fetch'
import { Spin,message } from 'antd'
class ArticleDetail extends Component {
	constructor(props) {
		super(props)
		this.state={
			recordId:'',
			article:{},
			essayPhotos:[]
		}
	}
	show(){
		pub.loading(this,true);
		getSelectessay({essayId:this.props.params.id}).then((data) => {
              this.setState({
				article: data.essay,
				essayPhotos:data.essay.essayPhotos?data.essay.essayPhotos:[]
			  });
			  pub.loading(this,false);
		},(res)=>{
         pub.loading(this,false);
		 pub.reject(res);
		})
	}
   componentWillMount() {
	   this.show()
	}
	submitSH(){
		submitEssSh({essayId:this.props.params.id}).then((data)=>{
            if (data.result === 'RC100') {
				pub.jumpHistory.push('/GoodArticle');
			} else {
				message.error(data.errMsg, 3);
			}
		},(res)=>{
		 pub.reject(res);
		})
	}
	operate(id, type) {//蜂行圈收藏1点赞0
		fetch.operateArticle(id, type).then((data) => {
			if (data.result === 'RC100') {
				this.show()
				message.success(data.msg, 3);
			}if(data.result === 'RC200'){
				message.error(data.errMsg, 3);
			}
		})
	}

	confirmBuy(article,type,id){
			if(article.userEssayOperation.isBuy===1){
				if(id!==undefined){
					this.operate(article.essayId,type)
				}else{
					pub.jumpHistory.push("/ArticleDetail/" + article.essayId);
				}
			}
		}
	render(){
		let article=this.state.article;
		return(
		       <div className="wrapper bg-F0F4F6">
		       	<div className="layout pad-t-20">
					<Spin spinning={this.state.loading} tip="加载列表中...">   
		       		<div className="row bg-FFFFFF">
		       			<div className="article-details">
		       				<div className="title" style={{ width:'100%',textOverflow: 'ellipsis'}}>{article.essayTitle}</div>
		       				<div className="like-read-time">
		       					<span><i className="icon-heart-empty"></i>{article.sumCollection}</span>
		       					<span><i className="icon-eye-open"></i>{article.sumClick}</span>
		       					<span><i className="icon-time"></i>{pub.formatTimestamp(article.createTime)}</span>
		       				</div>
		       				<div className="line"></div>
		       				<div className="content">
		       					<pre style={{width:'800px',whiteSpace: 'pre-wrap'}}>{article.essayNote}</pre>
								  {
									   this.state.essayPhotos.map((item,index)=>{
										   return(
                                                <img key={index}  src={pub.getFile(item.essayPhotoPath)} alt='test' />
										   )
									   })
								   }
		       				</div>
		       				{JSON.stringify(article)!=='{}'?
		       				<div className="collect-like">

								{article.goodEssay === "1" ?
									<span onClick={() => this.confirmBuy(article,'1',article.essayId)} style={{ opacity: article.userEssayOperation.isCollection === 1 ? 1 : 0.4 }}><i className="icon-heart"></i>{article.sumCollection}</span>
									:
									<span onClick={() => this.operate(article.essayId, '1')} style={{ opacity: article.userEssayOperation.isCollection === 1 ? 1 : 0.4 }}><i className="icon-heart"></i>{article.sumCollection}</span>
								}

								<span onClick={() => this.operate(article.essayId, '0')} style={{ opacity: article.userEssayOperation.isLike === 1 ? 1 : 0.4 ,marginLeft:'15px'}}><i className="icon-thumbs-up"></i>{article.sumLike}</span>
							</div>:''}
		       				<div className="row text-right">
		       					{
									   this.props.params.code==='collect'?
									   <Link to="/PersonalCenter/Collector/true" className="back-list">返回文章列表&gt;</Link>:
									   <a onClick={()=>{window.history.back();}} className="back-list">返回文章列表&gt;</a>
								}
		       				</div>
							   <div className="pop-btn1">
								   {
									   article.checkState==='4'?
									   <a className="btn btn-blue" onClick={()=>this.submitSH()}>提交审核</a>:null
								   }
						       </div>
		       			</div>
		       		</div>
				  </Spin>
		       	</div>
		       </div>
			)
	}
}
export default ArticleDetail;